@charset "utf-8";

.kh-container,section {
  width: 100%;
  height: 100%;
}

.kh-to-logo {
  display: block;
  width: 52px;
  height: 70px;
  margin: 50px auto 120px;
  background-image: url("../../src/blog-img/to-logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.kh-effect {
  display: flex;
  width: 100%;
  height: 100%;
}

.kh-effect-menu {
  height: 100%;
  width: 16%;
  background-color: #eee;
  border-right: 1px solid #e3e3e3;
  box-sizing: border-box;

  ul {
    a {
      display: block;
      text-align: left;
      color: #333;
      margin: 10px 0;
      padding: 6px 20px;
      transition: background .3s;

      &:hover {
        color: #20d2ad;
        background: #FFF;
      }
    }

    .kh-effect-menu-actv {
      color: #20d2ad;
      padding: 8px 20px;
      border-left: 4px solid #20d2ad;
      background: #FFF;
    }
  }
}

// main - layout
.kh-edit-main {
  height: 100%;
  width: 84%;
  box-sizing: border-box;
  display: flex;
  align-content: flex-start;
}

.kh-edit-form {
  width: 40%;
  height: 100%;
  border-right: 1px solid #e3e3e3;

  .kh-edit-choose {
    border-bottom: 2px solid #e3e3e3;

    h2 {
      font-weight: 400;
      color: #333;
      font-size: 24px;
      margin: 0;
      padding: 20px;
    }
  }
}

.kh-edit-form-body {
  padding: 20px;

  .kh-edit-form-ctrl {
    font-size: 14px;
    font-weight: 200;
    color: #333;
    margin-bottom: 20px;

    label {
      font-size: 18px;
      margin-bottom: 8px;
    }

    .kh-edit-form-num {
      position: relative;
      margin-top: 6px;

      i {
        position: absolute;
        top: 10px;
        right: 10px;
        height: 16px;
        width: 16px;
        font-size: 14px;
      }

      input {
        width: 100%;
        height: 36px;
        padding: 0 30px 0 8px;
        outline: 0;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid #dcdddd;
        background-color: #f4f4f4;

        &:hover {
          border: 1px solid #20d2ad;
          background-color: #FFF;
        }
      }
    }
  }
}


// uditer -style
.kh-edit-main {
  position: relative;
  //padding: 20px;
}

.kh-issue {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.kh-issue-btn {
  width: 100%;
  display: block;
  padding: 10px 0;
  color: #FFF;
  text-align: center;
  background-color: #20d2ad;
}
































